<template>
	<view class="good_list">
		<view class="list_detail" :style="{'background':bgc}">
			<image src="../../static/logo.png" mode=""></image>
			<text>{{list[currentIndex].name}}</text>
			<text style="margin-right: 20rpx;">点了赞</text>
		</view>

	</view>
</template>

<script setup>
	import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue';
	const list = [{
		name: 'zhu'
	}, {
		name: 'crane'
	}]
	const currentIndex = ref(0)
	const changList = () => {

		if (currentIndex.value < list.length - 1) {
			currentIndex.value += 1

		} else {
			currentIndex.value = 0

		}
		change16Color()
	}
	const bgc = ref()
	const change16Color = ()=> {
		var r = Math.round(255 * Math.random()).toString(16);
		var g = Math.round(255 * Math.random()).toString(16);
		var b = Math.round(255 * Math.random()).toString(16);
		var rgb2 = "#" + r + g + b;
		bgc.value = rgb2
	}

	const timer = ref()
	onMounted(() => {
		change16Color()
		timer.value = setInterval(() => {
			changList()
		}, 3000)
	})
	onBeforeUnmount(() => {
		clearInterval(timer.value)
		timer.value = null
	})
</script>

<style lang="scss" scoped>
	@keyframes move {
		0% {
			transform: translateX(-1000rpx);
		}

		20% {
			transform: translateX(15rpx);
		}

		80% {
			transform: translateX(15rpx);
		}

		100% {

			transform: translateX(-1000rpx);
		}
	}

	.list_detail {
		animation: move 3s linear both infinite;
		box-sizing: border-box;
		padding: 5rpx;
		display: flex;
		color: white;
		font-size: 24rpx;
		align-items: center;
		border-radius: 30rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 999%;
		}

	}

	.good_list {
		position: fixed;
		left: 20rpx;
		bottom: 300rpx;
	}
</style>